@import '../base.scss';

.main{
    background-color: #FCEADC;
    .top{
        height: 281px*3;
        background: url('../../images/dphjr-1016/images/banner_01.jpg')no-repeat center 0,
        url('../../images/dphjr-1016/images/banner_02.jpg')no-repeat center 281px,
        url('../../images/dphjr-1016/images/banner_03.jpg')no-repeat center 281px*2;
    }
    .wrap{
        width: 1000px;
        margin: 0 auto;
        position: relative;
        transform: translateY(-150px);
    }
    .title-1{
        margin: 0 auto;
        width: 342px;
        height: 89px;
        background: url('../../images/dphjr-1016/title.png');
        text-align: center;
        line-height: 70px;
        color: #791515;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }
    .nav{
        width: 350px*2;
        margin: 0 auto;
        margin-top: 50px;
        display: flex;

         .title-1.cur{
            transform: scale(.7);
        }
    }
    .container{
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .card{
            width: 328px;
            height: 448px;
            background-color: white;
            margin-top: 20px;
            color: #333;
            position: relative;
            &.cur{
                &::before{
                    content: '主推';
                    position: absolute;
                    width: 50px;
                    height: 30px;
                    left: 0;
                    top: 0;
                    text-align: center;
                    line-height: 30px;
                    color: white;
                    background-color: #E01222;
                    font-size: 16px;

                }
                &::after{
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 0;
                    left: 50px;
                    top: 0;
                    border: 0 solid #E01222;
                    border-top-width: 30px;
                    border-top-color: transparent;
                    border-left-width: 10px;
                }
            }

            img{
                width: 100%;
                height: 320px;
                background-color: deeppink;
            }
            >div{
                box-sizing: border-box;
                height: 448px-320; 
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-direction: column;
                padding: 10px;
                font-size: 16px;
                
                >div{
                    >span{
                        color: #666;
                        font-size: 14px;
                    }
                    >i{
                        color: red;
                        font-style: normal;
                    }
                }
                >span{
                    display: block;
                    width: 156px;
                    height: 30px;
                    color: white;
                    text-align: center;
                    line-height: 30px;
                    background-color: #E01222;
                    border-radius: 4px;
                }
            }
        }
    }
    .back-top{
        width: 179px;
        height: 71px;
        margin: 0 auto;
        background: url('../../images/dphjr-1016/back-top.png');
        transform: translateY(-70px);
        cursor: pointer;
    }
}